<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .box{
            margin: 50px auto;
            border: 2px solid #666;
            width: 200px;
            padding: 20px;
            border-radius: 5px;
        }

        hr{
            margin: 10px auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="checkbox">全选
        <hr>
        <input class="item" type="checkbox">张妃<br />
        <input class="item" type="checkbox">李妃<br />
        <input class="item" type="checkbox">明妃<br />
        <input class="item" type="checkbox">宦妃<br />
        <input class="item" type="checkbox">艺霏<br />
        <input class="item" type="checkbox">王妃
    </div>


    <script>
        // 上面的状态决定下面的状态  

        // 判断全选按钮的状态 

        // 将状态布尔值 依次赋值给 下面的选项 


        // 获取元素 

        var allBtn = document.querySelector('input');
        var items = [...document.getElementsByClassName('item')];

        // 给全选按钮绑定点击事件 
        allBtn.onclick = function(){
            // alert(allBtn.checked)
            items.forEach(function(item){
                item.checked = allBtn.checked
            })
        }



        // 下面影响上面

        // 给每个选项绑定点击事件 
        items.forEach(function(item){
            item.onclick = handler;
        })

        // 点击以后做什么事情 
        function handler(){
            // 判断是否所有的选项卡都被选中了 
            allBtn.checked = items.every(function(item){
                return item.checked == true
            })
        }
    </script>
</body>
</html>